<template>
  <div>
    <div class="big-box">
      <div
        :style="{ backgroundImage: `url(${videoInfo.image})` }"
        class="videoBg"
      ></div>
      <div class="video-box">
        <video
          controls
          loop
          width="100%"
          height="100%"
          :src="videoInfo.content_video[0].source_link"
        ></video>
      </div>
    </div>
    <div class="main-container">
      <div class="content-left">
        <div class="title-box">
          <h3>{{ videoInfo.title }}</h3>
          <div class="sanlian-box">
            <ul>
              <li>
                <span class="iconfont icon-good"></span>
                <span>{{ videoInfo.count_comment }}</span>
              </li>
              <li>
                <span class="iconfont icon-like"></span>
                <span>{{ videoInfo.count_like }}</span>
              </li>
              <li>
                <span class="iconfont icon-ckshare"></span>
                <span>{{ videoInfo.count_share }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="ad-right">
        <div class="ad-box">
          <h3>来访创作人</h3>
          <p>还没有来访的创作人</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";

export default {
  name: "Video",
  computed: {
    ...mapState(["postId","videoInfo"])
  },
  methods:{
    ...mapMutations(["setVideo","setPostid"])
  },
  created() {
    console.log(this.postId);
    let url = `https://api.kele8.cn/agent?url=https://app.vmovier.com/apiv3/post/view?postid=${this.postId}`
    let getVideoInfo = axios.get(url);
    getVideoInfo.then(res=>{
      console.log(res.data.data);
      this.setVideo(res.data.data);
    })
  }
};
</script>

<style lang="scss" scoped>
.big-box {
  position: relative;
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  .videoBg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(10px); // 设置背景模糊
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  .video-box {
    width: 960px;
    height: 540px;
    z-index: 9999;
  }
}
.main-container {
  width: 1180px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  .content-left {
    width: 860px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    .title-box {
      h3 {
        font-size: 26px;
        color: #333;
      }
      .sanlian-box {
        margin-top: 20px;
        ul {
          display: flex;
          justify-content: right;
          padding: 10px 0;
          li {
            border: 1px solid #ddd;
            border-radius: 2px;
            padding: 0 20px;
            margin-left: 20px;
            line-height: 30px;
            cursor: pointer;
            &:hover {
              border-color: #666;
            }
            span {
              display: inline-block;
              font-size: 14px;
              font-weight: 500;
            }
            span:nth-child(1) {
              margin-right: 8px;
              font-size: 18px;
              font-weight: bold;
              color: #000;
            }
          }
        }
      }
    }
  }
  .ad-right {
    width: 300px;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    .ad-box {
      h3 {
      }
      p {
        text-align: center;
        margin-top: 30px;
        font-size: 16px;
        font-weight: 500;
        color: #666;
      }
    }
  }
}
</style>